<template>
	<view class="system-page">
		<view class="system-page-group clear">
			<uni-icons type="compose" size="16" class="icon-compose"></uni-icons>
			<text>清除未读</text>
		</view>
		<view class="system-page-group list">
			<view class="list-item overflow" v-for="(v, i) in listData" :key="'list-data-' + i">
				<view class="lt">
					<view class="icon-notice">
						<img src="/static/images/icon/notice.png" class="icon-notice-image" />
					</view>
				</view>
				<view class="rt">
					<view class="list-item-tit">
						<text>{{ v.title }}</text>
						<uni-icons type="right" size="14"></uni-icons>
					</view>
					<view class="list-item-con">
						{{ v.content }}
					</view>
					<view class="list-item-foo">
						<text>{{ v.time }}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listData: [{
				title: '资格认证通知',
				content: `	尊敬的申请人资格认证已成功通过。经过审查，我们很高兴地通知您，您的资格认证申请已成功通过。在此，我们向您表示衷心的祝贺！通过资格认证能够证明您在智能水电相关领域具备一定的专业能力和经验。您通过本次资格认证的成绩显示出了您的出色表现和卓越能力，为您未来的在平台的发展打下了坚实的基础。
如果您需要进一步的证明材料或其他相关文件，请及时与我们联系。最后，再次恭喜您！我们对您所取得的成绩感到无比自豪，并期待着您在未来的职业生涯中取得更大的成就。衷心祝愿您在接下来的道路上取得更大的成功！`,
				time: '星期一 10:19'
			},
			{
				title: '权益内容',
				content: `	资格认证通过后，您将获得以下的下权益和机会：
1、行业认可‌：将进一步证明您在水电气智能化领域具备较高的专业素养和技能，增加您在水电行业内的认可度和竞争力。
2、项目机会‌：资格认证是许多企业和机构在招聘和选拔人才时的重要参考依据，通过认证将有助于您获得更多的职业机会和晋升空间。
‌3、专业发展‌：认证后不仅是对您个人能力的认可，也是您持续学习和专业发展的动力，您可以通过参加水电邦相关培训和技术服务活动来不断提升自己的知识水平和实践能力。`,
				time: '星期一 10:19'
			}]
		}
	}
}
</script>

<style lang="scss">
.system-page {
	height: 100%;
	background-color: #fff;

	&-group {
		&.clear {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 13px;
			color: #656565;
			letter-spacing: 0;
			padding: 10px 13.26px;

			.icon-compose {
				margin-right: 8.16px;
			}
		}

		&.list {
			height: calc(100% - 30px);
			overflow: auto;

			.list-item {
				border-bottom: 1px solid rgba(151, 151, 151, 0.1);
				margin: 15px 14px;

				.lt {
					margin-left: 5px;

					.icon-notice {
						width: 24px;
						height: 24px;
						background: #22A366;
						color: #fff;
						border-radius: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						&-image {
							width: 24px;
							height: 20px;
						}
					}
				}

				.rt {
					width: calc(100% - 34px);

					.list-item-tit {
						height: 21px;
						font-family: PingFangSC-Semibold;
						font-weight: 600;
						font-size: 15px;
						color: #0F0F0F;
						letter-spacing: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 4px 0;
					}

					.list-item-con {
						padding: 9px 0;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 13px;
						color: #262626;
						letter-spacing: 0;


						text-indent: 2em;
					}

					.list-item-foo {
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 12px;
						color: #969696;
						letter-spacing: 0;
						margin-bottom: 7px;
					}
				}

			}
		}
	}
}
</style>